<template>
	<view class="content">
		
		<view class="header-wrap">
			<view class="nav-wrap">
				<view class="left" style="float: left;font-size: 40rpx; width:30rpx; height:40rpx" @click="back()">
					<image src="../../static/back.png" mode=""></image>
				</view>
				<view class="types">
					配载
				</view>
				<text></text>
			</view>
			
		</view>
		<view class="head">
			<view class="headCon">
				<view class="headConTop">
					<u-icon class="icon" name="photo"></u-icon>运输总量
				</view>
				<view class="num">
					{{ info.loadingOrderPlanShippingNum }}
				</view>
			</view>
			<view class="headCon">
				<view class="headConTop">
					<u-icon class="icon" name="photo"></u-icon>可配载总量
				</view>
				<view class="num">
					{{ info.sureLoadingOrderNum }}
				</view>
			</view>
			<view class="headCon">
				<view class="headConTop">
					<u-icon name="photo"></u-icon>运输单价
				</view>
				<view class="num">
					{{info.shippingPrice}}
				</view>
			</view>
		</view>
		<view class="selList">
			<view class="selLi"  @click="openDriver">
				司机 
				<view class="fr">
					{{driver.driverName?driver.driverName + ' ' + driver.mobile :'请选择'}}
					<u-icon v-if="!driver.driverName" name="arrow-right" size="13" color="#9E9E9E"></u-icon>
				</view>
			</view>
			<u-popup :round="10" :show="driverShow" @close="close">
				<view class="driverPopup">
					<view class="head">
						<text @click="driverShow=false">取消</text>
						请选择承运司机
						<text class="addDriver">新增</text>
					</view>
				<!-- 	<u-search shape="square" :showAction="false"></u-search> -->
				<u-search shape="square" placeholder="请输入司机姓名/手机号码"  :showAction="false" v-model="driverInput" @change="searchDriver()"></u-search>
					<view class="driverCont">
						<u-loading-icon text="加载中" v-if="loadingDriver" textSize="18"></u-loading-icon>
						<view class="notext" v-show="driverData.length == 0 && !loadingDriver">暂无司机信息，请新增</view>
						<view class="driverList">
							<view class="driverLi" v-for="item in driverData" :key="item.phone" @click="selDriver(item)">
								<view class="driverName">
									{{item.driverName}}
								</view>
								<view class="driverPhone">
									{{item.mobile}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<view class="selLi"   @click="openCar">
				车辆
				<view class="fr">
					{{ carInfo.plateNum?carInfo.plateNum:'请选择'}}<span class="icon"><u-icon name="arrow-right" size="13" color="#9E9E9E"></u-icon></span>
				</view>
			</view>
			<u-popup :show="showCar" @close="showCar=false">
				<view class="driverPopup">
					<view class="head">
						<text @click="showCar=false">取消</text>
						请选择承运车辆
						<text class="addDriver">新增</text>
					</view>
					<u-search shape="square" :showAction="false" v-model="searchCar" @change="searchCarVal()"></u-search>
					<view class="driverCont">
						<view class="notext" v-show="false">暂无车辆信息，请新增</view>
						<view class="carList">
							<view class="carLi" v-for="item in carData" :key="item.phone"  @click="selCar(item)">
								<view class="driverName">
									{{item.plateNum}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			
		</view>
		<view class="selList" >
			<view class="selLi">
				运输数量({{info.unitName}}) 
				<view class="fr">
					{{info.planShippingNum}}
				</view>
			</view>
			<view class="selLi">
				到付金额（元）
				<view class="fr">
					{{info.prepayTotal}}
				</view>
			</view>
			<view class="selLi">
				回单付金额（元）
				<view class="fr">
					{{info.receiptTotal}}
				</view>
			</view>
		</view>
		<view class="btnBox" @click="save">
			<view class="btn">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	import {
		querySelectorDriver,querySelectorVehicle,wayBillStowageInfo, editLoading
	} from '@/config/api/app.js'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				etpId:'',//企业id
				loadingOrderId: '', //配载单id
				driverShow: false, //司机弹框
				driverInput:'', //填写的司机
				driver:{},//选定的司机
				dispatchShow: false,
				showCar: false, //车辆弹框
				checked: true,
				checked1: false,
				driverData:[],//司机列表
				carData: [],//车辆列表
				searchCar:'',
				carInfo:{},
				info:{},
				loadingDriver:false
			}
		},
		onLoad(option) {
			this.loadingOrderId = option.loadingOrderId
			this.etpId = Cache.get('USERINFO')[0].etpId
			this.getInfo(option)
			this.getDriver()
		},
		methods:{
			getInfo(option){
				wayBillStowageInfo(option).then(res => {
					if(res.code == 0){
						this.info = res.data
						this.driver.driverName =  res.data.driverNamse
						this.driver.mobile =  res.data.driverTel
						this.driver.driverId = res.data.driverId
						this.carInfo.plateNum = res.data.vehicleNo
						this.carInfo.vehicleInfoId = res.data.vehicleId
					}else{
						   uni.$u.toast(res.msg);
					}
				})
			},
			searchDriver(){
				this.getDriver({driverKey: this.driverInput})
			},
			searchCarVal(){
				this.getCar(this.searchCar)
			},
			
			//获取司机列表
			getDriver(val){
				this.loadingDriver = true
				let data = {
					etpId: this.etpId,
					queryType: "1",
					projectId: Cache.get('itemId'),
					...val
				}
				querySelectorDriver(data,{
						title: '加载中……'
					}).then(res => {
					if(res.code == 0){
						this.driverData = res.data
						this.loadingDriver = false
					}else{
						   uni.$u.toast(res.msg);
					  }
				})
			},
			
			//获取车辆
			getCar(data){
				querySelectorVehicle({etpId: this.etpId,queryType: "1",plateNum: data}).then(res => {
					if(res.code == 0){
						this.carData = res.data
						this.showCar = true
					}else{
						   uni.$u.toast(res.msg);
					}
				})
			},
			//弹出司机选择
			 openDriver() {
				
				this.driverShow = true
			  },
			  //选择车辆
			  selDriver(item){
				  this.driver = item
				  this.driverShow = false
				   this.showCar = false
			  },
			  selCar(item){
				  this.carInfo = item
				  this.driverShow = false
				   this.showCar = false
			  },
			  //弹出车辆选择
			  openCar(){
				  
				  this.getCar()
			  },
			  close() {
				// this.driverShow = false
				this.driverShow = false
			  },
			  back(){
				  uni.redirectTo({
				  	url: '/pages/waybill/stowageDetails?loadingOrderId=' + this.loadingOrderId
				  });
			  },
			  save(){
				  let data ={
					  driverName: this.driver.driverName,
					  driverTel: this.driver.mobile,
					  driverId: this.driver.driverId,
					  vehicleNo: this.carInfo.plateNum,
					  vehicleId: this.carInfo.vehicleInfoId,
					  loadingOrderId: this.loadingOrderId
				  }
				  editLoading(data).then(res => {
					  if(res.code == 0){
						  uni.$u.toast("运力修改成功");
						  let _this =this
						setTimeout(function(){
							uni.redirectTo({
								url: '/pages/waybill/stowageDetails?loadingOrderId=' + _this.loadingOrderId
							});
						},500)
					  }else{
						   uni.$u.toast(res.msg);
					  }
				  })
				
			  },
			  changeTimeFormat:function(time) {
			  	var date = new Date(time);
			  	var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			  	var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			  	var hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			  	var mm = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			  	return date.getFullYear() + "-" + month + "-" + currentDate+" "+hh + ":" + mm+ ':' + ss;
			  	//返回格式：yyyy-MM-dd hh:mm
			  },
			
		}
	}
</script>

<style lang="less">
	*{
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}
	.content{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background: #FFFFFF;
		padding-bottom: 200rpx;
		padding-top: 168rpx;
		.head{
			height: 168rpx;
			display: flex;
			background: #FFFFFF;
			padding-top: 30rpx;
			margin-bottom: 14rpx;
			.headCon{
				height: 90rpx;
				width: 33%;
				border-right: 2rpx solid #F5F7FB;
				text-align: center;
				.headConTop{
					display: flex;
					font-size: 20rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 20rpx;
					padding-left: 52rpx;
				}
				.num{
					font-size: 44rpx;
					font-family: DINPro-Bold, DINPro;
					font-weight: bold;
					color: #333333;
				}
			}
		}
		.selList{
			width: 100%;
			background: #FFFFFF;
			padding: 0 48rpx 0 48rpx;
			border-bottom: 14rpx solid #FAFAFA;;
			.selLi{
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				height: 96rpx;
				line-height: 96rpx;
				border-bottom:2rpx solid #FAFAFA;;
				.fr{
					float: right;
					display: flex;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9E9E;
					.icon{
						margin-top: 36rpx;
						margin-left: 8rpx;
					}
				}
				.placeCss{
					float: right;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9E9E9E;
				}
			}
			.driverPopup {
				padding: 0 28rpx;
				.head{
					height: 84rpx;
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					display: block;
					text-align: center;
					text{
						font-weight: 400;
						color: #333333;
						float: left;
					}
					.addDriver{
						color: #00468C;
						float: right;
					}
				}
				.driverCont{
					padding-top: 16rpx;
					height: 700rpx;
					overflow-y: auto;
					.notext{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #A1A1A1;
						margin: 144rpx auto 230rpx;
						text-align: center;
					}
					.driverList{
						padding-bottom: 36rpx;
						.driverLi{
							border-bottom: 2rpx solid #F5F7FB;
							padding-top: 8rpx;
							height: 120rpx;
							text-align: left;
							font-size: 32rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
							.driverPhone{
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #333333;
								padding-top: 14rpx;
							}
						}
						.driverLi:last-child{
							border: none;
						}
					}
					.carList{
						font-size: 30rpx;
						height:600rpx;
						overflow-y: auto;
						margin-bottom: 30rpx;
						.carLi{
							height: 60rpx;
							line-height: 60rpx;
							border-bottom: 2rpx solid #FAFAFA;
						}
					}
				}
			}
		}
		.remarks{
			width: 100%;
			background: #FFFFFF;
			padding: 28rpx 44rpx;
			.textBox{
				height: 438rpx;
				border-radius: 8rpx;
				border: 2rpx solid #9E9E9E;
			}
			h5{
				
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 40rpx;
				margin-bottom: 14rpx;
			}
		}
		.btnBox{
			width: 100%;
			height: 182rpx;
			background: #FFFFFF;
			padding-top: 14rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			.btn{
				height: 750rpx;
				height: 122rpx;
				margin: 0 auto;
				background: url('@/static/btn_bg.png') no-repeat;
				background-size: 100% 100%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height:108rpx;
			}
		}
		.dispatchBox{
			width: 664rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			position: relative;
			.close{
				width: 28rpx;
				height: 28rpx;
				position: absolute;
				top: 28rpx;
				right: 28rpx;
			}
			.tabUl{
				padding: 0 44rpx 54rpx 44rpx;
				.tabLi{
					height: 154rpx;
					line-height: 154rpx;
					font-size: 44rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					width: 576rpx;
					border-bottom: 2rpx solid #F5F7FB;
					background: url('@/static/waybIll/qiangd.png') no-repeat;
					background-size: 60rpx 58rpx;
					background-position: 0 center;
					padding-left: 76rpx;
					.u-checkbox-group--row{
						width: 44rpx;
						height: 44rpx;
						margin-top: 98rpx;
						float: right;
						margin-top: 52rpx;					
					}
				}
				.tabLi:last-child{
					background: url('@/static/waybIll/zhipai.png') no-repeat;
					background-size: 60rpx 58rpx;
					background-position: 0 center;
				}
				
			}
			.selDispatch{
				width: 576rpx;
				height: 98rpx;
				text-align: center;
				line-height: 98rpx;
				background: #003E81;
				color: #FFFFFF;
				margin: 0 auto 44rpx;
			}
			.dispatchHead{
				font-size: 32rpx;
				text-align: center;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				margin: 44rpx 0 36rpx;
				color: #333333;
			}
		}
		.header-wrap {
			position: absolute;
			z-index: 10076;
			top: 0;
			left: 0;
			width: 100vw;
			box-sizing: border-box;
			padding: 100rpx 24rpx 16rpx;
			background: #fff;
			.nav-wrap{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					image{
						width: 100%;
						height: 100%;
					}
				}
				text {
					min-width: 30rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
		
		
	}
</style>